<script>
// QQ 登录的 URL
const QQ_LOGIN_URL =
  'https://graph.qq.com/oauth2.0/authorize?client_id=101998494&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fimooc-front.lgdsunday.club%2Flogin'
</script>

<script setup>
import SvgIcon from '../../components/SvgIcon.vue'
import { onMounted } from 'vue'
import brodacast from './brodacast'
onMounted(() => {
  if (typeof QC === 'undefined') {
    console.error('QC 对象未正确引入，请检查 SDK 是否加载成功。')
    return
  }
  console.log('QC 对象已加载:', QC)
  if (typeof QC.Login === 'function') {
    // 监听 QQ 登录的 URL
    QC.Login({ btn: 'qqLoginBtn' }, (data, opts) => {
      console.log('QQ登录成功', data, opts)
      QC.Login.signOut()
      const accessToken = /access_token=((.*))&expires_in/.exec(
        window.location.hash
      )[1]
      const oauthObj = {
        nickname: data.nickname,
        figureurl_qq_2: data.figureurl_qq_2,
        accessToken
      }
      brodacast.send(oauthObj)
      oauthLogin('QQ', oauthObj)
      // 5. 在 PC 端下，关闭第三方窗口
      window.close()
    })
  } else {
    console.error('QC.Login 方法未找到，请检查 SDK 是否加载正确。')
  }
})
const onQQLogin = () => {
  openQQwindow()
}
const openQQwindow = () => {
  window.open(
    QQ_LOGIN_URL,
    'oauth2Login_10609',
    'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'
  )
  // 下面会跳转线上地址，但是没法本地调测故该功能无法开发
  brodacast.wait().then(async (oauthObj) => {
    // 登录成功,关闭通知
    brodacast.clear()
    // 执行登录操作
    oauthLogin('QQ', oauthObj)
  })
}
</script>

<template>
  <SvgIcon name="qq" class="w-10 h-10" @click="onQQLogin" />
</template>
